import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { messageItemDefaultProps } from './defaultProps';
import type { MessageItemOptions } from './type';

export interface MessageItemProps extends MessageItemOptions, HTMLAttributes<HTMLElement> {}

const MessageItem: FC<MessageItemProps> = (props) => {
  const { className, as, children, forwardedRef, ...messageItemProps } = props;

  return createElement(as!, { ref: forwardedRef, className: classNames(className), ...messageItemProps }, children);
};

MessageItem.displayName = 'MessageItem';
MessageItem.defaultProps = messageItemDefaultProps;

export default MessageItem;
